<template>
    <el-dialog :visible.sync="visible" title="补签合同" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
            :label-width="$i18n.locale === 'en-US' ? '150px' : '110px'">
            <el-form-item label="合同编号" prop="contractNumber">
                <el-input v-model="dataForm.contractNumber" placeholder="合同编号"></el-input>
            </el-form-item>
            <el-form-item label="上传合同图片" prop="imageDataList">
                <el-upload class="upload-demo" :action="uploadUrl" :headers="headers" :show-file-list="true"
                    :multiple="true" :on-success="imageHandleAvatarSuccess" :on-change="imageHandleChange"
                    :on-remove="imageRemove" :before-upload="imageOnBeforeUpload" :file-list="imageList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="上传合同文件" prop="fileDataList">
                <el-upload class="upload-demo" :action="uploadUrl" :headers="headers" :show-file-list="true"
                    :multiple="true" :on-success="fileHandleAvatarSuccess" :on-change="fileHandleChange"
                    :on-remove="fileRemove" :before-upload="fileOnBeforeUpload" :file-list="dataFileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{
                $t("confirm")
                }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            uploadUrl: window.SITE_CONFIG['apiURL'] + '/order/order/upload/files',
            headers: { token: Cookies.get('token') },
            visible: false,
            dataForm: {
                id: "",
                contractNumber: "",
                imageDataList: [],
                fileDataList: []
            },
            imageList: [],
            pushImageList: [],
            dataFileList: [],
            pushDataFileList: []
        };
    },
    computed: {
        dataRule() {
            return {
                imageDataList: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ]
            }
        },
    },
    methods: {
        init() {
            this.imageList = []
            this.pushImageList = []
            this.dataFileList = []
            this.pushDataFileList = []
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
            });
        },
        // 上传格式做限制
        imageOnBeforeUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg" || testmsg === "png" || testmsg === "jpeg" || testmsg === "JPEG";
            if (!extension) {
                setTimeout(() => {
                    this.$message({
                        message: `文件"${file.name}"只能上传jpg、jpeg、JPEG格式!`,
                        type: "warning"
                    });
                })
                this.imageList = []
            }
            return extension;
        },
        // 上传格式做限制
        fileOnBeforeUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "pdf" || testmsg === "PDF" || testmsg === "doc" || testmsg === "docs";
            if (!extension) {
                setTimeout(() => {
                    this.$message({
                        message: `文件"${file.name}"只能上传pdf、doc、docs格式!`,
                        type: "warning"
                    });
                })
                this.dataFileList = []
            }
            return extension;
        },
        imageHandleChange(file, imageList) {
            this.imageList = imageList.slice(-3);
        },
        imageHandleAvatarSuccess(res, file) {
            this.pushImageList.push(res.data);
            this.dataForm.imageDataList = this.pushImageList
        },
        imageRemove(file, imageList) {
            console.log(file)
            console.log(imageList)
            this.dataForm.imageDataList = imageList
        },
        fileHandleChange(file, fileList) {
            this.dataFileList = fileList.slice(-3);
        },
        fileHandleAvatarSuccess(res, file) {
            this.pushDataFileList.push(res.data);
            this.dataForm.fileDataList = this.pushDataFileList
        },
        fileRemove(file, fileList) {
            this.dataForm.fileDataList = fileList
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$http.post(
                        "/order/order/signContract",
                        this.dataForm
                    )
                        .then(({ data: res }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => { });
                });
            },
            1000,
            { leading: true, trailing: false }
        ),
    },
};
</script>